<template>
  <div>
    <el-table
      :data="tData"
      border
      style="width: 100%">

        <!-- <template slot-scope="scope">
          <a :href="'localhost:8080/#/student/'+scope.row.name" target="_blank" class="buttonText">{{scope.row.name}}</a>
        </template> -->
        <el-table-column prop="name" label="商家名称" sortable></el-table-column>
        <el-table-column prop="tele" label="商家电话" sortable></el-table-column>
        <el-table-column prop="addr" label="商家地址" sortable></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-right"
              size="mini"
              @click="intoShop(scope.row.name)"
            >
            </el-button>
          </template>
        </el-table-column>
    </el-table>

    <el-drawer
      title="菜品信息"
      :visible.sync="table"
      :before-close="handleClose"
      size="80%">
      <el-table 
      :data="foodInf"
      ref="multipleTable"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
          <el-table-column property="food" label="食物" width="150"></el-table-column>
          <el-table-column property="price" label="价格" width="200"></el-table-column>
          <el-table-column prop="img" label="图片">
            <template slot-scope="{row}">
              <img v-if="row.img" :src="row.img"  class="imageConst" >
             <i v-else  class="imageConst"></i>
            </template>
          </el-table-column>
          <el-table-column property="desc" label="描述"></el-table-column>
          <el-table-column property="type" label="类型"></el-table-column>
          <el-table-column label="数量">
            <template slot-scope="{row}">
              <el-input-number style="width:15px height:10px" v-model="row.foodNum" controls-position="right" :min="0" :max="10" label="数量"></el-input-number>
            </template>
          </el-table-column>
        
        </el-table>

        <el-button @click="addFood()">加入购物车</el-button>
    </el-drawer>
  </div>
  </template>
  
  <script>
import axios from 'axios';
    export default {
      data() {
        return {
          multipleSelection: [],
          tData: [],
          table:false,
          foodInf:[],
          num:0,
          choiceList:[],
          foodNum:[],
          tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        }
      },
      created() {
        this.getShops()
      },
      methods: {
        handleSelectionChange(val) {
        this.multipleSelection = val;
        // console.log(this.multipleSelection)
        // this.multipleSelection = []
        console.log("val")
        console.log(val)
        // 假设取出 id 字段
        // val.forEach(item => {
        //   console.log(item)
        //   const name = item.food
        //   const num = item.foodNum
        //   if(num !== 0) {
        //     this.multipleSelection.push({name:name,num:num})
        //     this.choiceList.push({name:name,num:num})
        //     console.log(this.multipleSelection)
        //   }
        // })
      },
        async getShops() {
          axios.post(`/customer/allshop`,{
        })
        .then((res) => { 
          this.tData = res.data;
          console.log("post data")
          console.log(this.tData)
        })
        },
        intoShop(namet) {
          this.table = true
          console.log(namet)
          axios.put(`/customer/in`,{name:namet})
          .then((res)=>{
            if(res.data.state !== 0) this.$message.error('进入失败')
          })
          axios.post(`/customer/allfood/detailed`,{}) 
          .then((res)=>{
            this.foodInf = res.data
            foodNum.push({})
            console.log("all foods")
            console.log(this.foodInf)
          })
        },
        handleClose() {
          // axios.put(`/customer/out`,{})
          this.table = false
        },
        handleChange(value) {
        console.log(value);
        this.num = value
        console.log(this.num)
      },
      toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            console.log(this.$refs.multipleTable)
            this.$refs.multipleTable.clearSelection();
          }
          this.params = [];
        },
        addFood() {
          console.log("add2cart")
          console.log(this.multipleSelection)
          axios.put(`/customer/shop/cart/add`,this.multipleSelection)
        .then((res)=>{
          if(res.data.state !== 0) this.$message.error("添加购物车失败")
          else this.$message.success('添加成功')
        })
        }
      }
    }
  </script>